<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.xm{
				background-color: #008000;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h1>Service</h1>
			<ul style="list-style-type: none;" >
				<li v-for="(item,index) in type" v-on:click="fn(index)" v-bind:class="[item.bol==true?'xm':'s']">{{item.name}}          {{item.number}}</li>
			</ul>
			<p>Total:{{sum}}</p>
		</div>
		
		<script src="js/vue.min.js"></script>
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data:{
					type:[
						{'name':'Web Development','number':3000,'bol':false},
						{'name':'Python','number':1000,'bol':false},
						{'name':'Java','number':2000,'bol':false},
						{'name':'GO','number':2200,'bol':false}
					],
					sum:0
				},
				methods:{
					fn:function(index){
						if(this.type[index].bol==false){
							for (var i = 0; i < this.type.length; i++) {
								if(i==index){
									this.type[i].bol=true;
									this.sum+=this.type[i].number;
								}
							}
						}else{
							for (var i = 0; i < this.type.length; i++) {
								if(i==index){
									this.type[i].bol=false;
									this.sum-=this.type[i].number;
								}
							}
						}
						
					}
				}
			});
		</script>
	</body>
</html>
